<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>绑定样式</title>
    <style>
        .test1{
            border: 1px solid;
            height: 50px;
            width:200px;
        }
        .testClose3{
            background: rgb(219, 108, 108);
        }
        .test3{
            font-size: 30px;
            font-weight: 800;
        }
        .testClose1{
            background-color: aquamarine;
        }
        .testClose2{
            background-color: rgb(150, 220, 36);
        }
    </style>
</head>
<body>
    
    <!-- 
       绑定样式：
            1.class样式：
                写法： :class='xxx' xxx可以是 字符串、对象、数组
                    字符串写法适用于：类名不确定，要动态获取
                    数组写法适用于：要绑定多个样式，个数不确定，类名也不确定
                    对象写法适用于：要绑定多个样式，个数确定，类名也确定，动态决定是否使用
            2.style样式：
                :style="{fontSize : xxx}" 其中xxx是动态值
                :style="[a,b]" 其中 a、b 是样式对象
     -->


    <!-- 容器 -->
    <div id="root">
        <!-- 绑定 class 样式 -- 字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="test1" v-bind:class="mood" @click="changeMood">{{text}}：单击随机切换样式</div>
        <hr/>

        <!-- 绑定class 样式 -- 数组写法，适用于：绑定样式个数不确定、类名不确定 -->
        <div class="test1" :class="classArr" >{{text}}</div>
        <hr/>

         <!-- 绑定class 样式 -- 对象写法，适用于：绑定样式个数确定、类名确定，动态决定是否使用 -->
         <div class="test1" :class="classObj" >{{text}}</div>
         <hr/>

         <!-- 绑定 style 样式 --- 对象写法-->
         <div class="test1" :style="styleObj">{{text}}</div>
         <hr>
        <!-- 绑定 style 样式 --- 数组写法-->
         <div class="test1" :style="styleArr">{{text}}</div>
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。

       
    new Vue({
        el: '#root',
        data:{
            text:"测试",
            mood: 'testClose1',
            classArr:['test1','test3','testClose1'],
            classObj:{
                'test3':false,
                'testClose3':false,
            },
            styleObj:{
                fontSize : '30px',
                backgroundColor : 'red',
            },
            styleArr:[
                {
                    fontSize : '15px',
                },
                {
                    backgroundColor : 'slategray',
                }

            ]
        },
        methods:{
            // 单击随机切换样式
            changeMood(){
                const arr  = ['testClose1','testClose2','testClose3'];
                let random =   Math.floor(Math.random()*3);
                console.log('@',random);
                this.mood=arr[random]; 
            }
        }

    })
 
       
    </script>
</body>
</html>